<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('商户注销')"/>
    <th:block th:include="include :: header('商户图片资料')"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content ">
    <form class="form-horizontal m" id="form-merchantInfo-updateMerMes">
        <input type="hidden" name="merno" id="merno" th:value="${merchantInfo.merno}" class="form-control"/>
        <input type="hidden" name="id" id="id" th:value="${accounts.id}" class="form-control"/>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">法人姓名：</label>
            <div class="col-sm-8">
                <input type="text" name="legal_name" id="legal_name" th:value="${merchantInfo.legalName}"
                       class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">开户人名称：</label>
            <div class="col-sm-8">
                <input type="text" name="screenName" id="screenName" th:value="${accounts.screenName}"
                       class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">身份证号码：</label>
            <div class="col-sm-8">
                <input type="text" name="screenIdnum" id="screenIdnum" th:value="${accounts.screenIdnum}"
                       class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">银行卡：</label>
            <div class="col-sm-8">
                <input type="text" name="screenNum" id="screenNum" th:value="${accounts.screenNum}" class="form-control"
                       required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">手机预留号码：</label>
            <div class="col-sm-8">
                <input type="text" name="resphone" id="resphone" th:value="${accounts.resphone}" class="form-control"
                       required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">总行名称：</label>
            <div class="col-sm-8">
                <input name="headBank" onclick="selectHeadBank()" th:value="${accounts.bankHeadname}" readonly
                       id="headBank" type="text" placeholder="总行名称" class="form-control" required>
                <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">支行名称：</label>
            <div class="col-sm-8">
                <input name="branchBank" onclick="selectBranchBank()" th:value="${accounts.bankName}" readonly
                       id="branchBank" type="text" placeholder="支行名称" class="form-control" required>
                <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">支付系统行号：</label>
            <div class="col-sm-8">
                <input type="text" name="subbranchId" id="bankNum" th:value="${accounts.bankNum}" class="form-control"
                       required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">身份证有效期：</label>
            <div class="col-sm-8">
                <input type="text" name="time" id="time" readonly class="time-input form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">账户开户地：</label>
            <div class="col-sm-2" style="width: 120px;">
                <select id="province" name="province" onchange="javascript:window.province('p')"
                        class="province form-control m-b" required>
                    <option value="">请选择</option>
                    <option th:each="p:${pList}" th:text="${p.areaName}" th:value="${p.areaCode}"
                            th:selected="${p.areaCode} eq ${province}"></option>
                </select>
            </div>
            <div class="col-sm-2" style="width: 120px;">
                <select id="city" name="city" onchange="javascript:window.province('c')" class="city form-control m-b"
                        required>
                    <option value="">请选择</option>
                    <option th:each="c:${cList}" th:text="${c.areaName}" th:value="${c.areaCode}"
                            th:selected="${c.areaCode} eq ${city}"></option>
                </select>
            </div>
            <!--<div class="col-sm-2" style="width: 120px;">
                <select id="area" name="area" onchange="javascript:window.province('a')" class="area form-control m-b" required>
                    <option value="">请选择</option>
                    <option th:each="a:${aList}" th:text="${a.areaName}" th:value="${a.areaCode}" th:selected="${a.areaCode} eq ${area}"></option>
                </select>
            </div>-->


        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required font-noraml">身份证正面：</label>
            <div class="col-lg-8">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput"><i
                            class="glyphicon glyphicon-file fileinput-exists"></i> <span
                            class="fileinput-filename"></span></div>
                    <span class="input-group-addon btn btn-white btn-file"><span
                            class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input
                            required type="file" id="1" name="1"></span>
                    <a href="#" class="input-group-addon btn btn-white fileinput-exists"
                       data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required font-noraml">身份证反面：</label>
            <div class="col-lg-8">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput"><i
                            class="glyphicon glyphicon-file fileinput-exists"></i> <span
                            class="fileinput-filename"></span></div>
                    <span class="input-group-addon btn btn-white btn-file"><span
                            class="fileinput-new">选择文件</span><span
                            class="fileinput-exists">更改</span><input type="file" id="2" name="2"></span>
                    <a href="#" class="input-group-addon btn btn-white fileinput-exists"
                       data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required font-noraml">银行卡正面：</label>
            <div class="col-lg-8">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput">
                        <i class="glyphicon glyphicon-file fileinput-exists"></i>
                        <span class="fileinput-filename"></span>
                    </div>
                    <span class="input-group-addon btn btn-white btn-file">
                            <span class="fileinput-new">选择文件</span>
                            <span class="fileinput-exists">更改</span>
                            <input type="file" id="4" name="4">
                        </span>
                    <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:inline="javascript">
    var prefix = ctx + "merchantInfo/merchantInfo";
    $("#form-merchantInfo-updateBank").validate({
        focusCleanup: true
    });



    function selectHeadBank() {
        var url = prefix + "/selectHeadBank/";
        $.modal.open("选择总行", url, '1000');
    }

    function selectBranchBank() {
        var headBank = $('#headBank').val();
        if ('' == headBank || undefined == headBank) {
            $.modal.msgError("请选择总行");
            return;
        }
        var url = prefix + "/selectBranchBank/" + headBank;
        $.modal.open("选择支行", url, '1000');
    }

    /**
     *
     * @param type 传入 省 p 市 c 区 a
     */
    function province(type) {
        var url = ctx + "area/area/list"; //获取地址信息
        if (type == 'p') {  //联动市
            if ($("#province").find("option:selected").val() == '') {
                defaultOption("city", "请选择");
                defaultOption("area", "请选择");
            } else {
                $.post(url, {'parentId': $("#province").val(), 'areaType': '1'}, function (result) {
                    if (result.code == '0') {
                        initSelect("city", result);
                    }
                });
            }
        } else if (type == 'c') {  //联动县
            $.post(url, {'parentId': $("#city").val(), 'areaType': '2'}, function (result) {
                if (result.code == '0', result) {
                    initSelect("area", result);
                }
            });
        }
    }

    //初始化 select选项
    function initSelect(selectId, data) {
        //清空旧的数据
        if (selectId == 'city') {
            $("#" + selectId).empty();
            $("#area").empty();
        } else {
            $("#" + selectId).empty();
        }
        var option = '<option value="">请选择</option>';
        data.rows.forEach(function (value) {
            option += "<option value='" + value.areaCode + "'>" + value.areaName + "</option>";
        });
        $("#" + selectId).append(option);
    }

    //初始化 select选项
    function defaultOption(selectId, text) {
        $("#" + selectId).empty();
        $("#" + selectId).append("<option value=''>" + text + "</option>");
    }

    function submitHandler() {
        // //if (valiFile()) {
        var data = new FormData();
        //加入文件对象 需要自定义处理不是file类型的参数
        data.append("merno", $("#merno").val());
        data.append("id", $("#id").val());
        data.append("legal_name", $("#legal_name").val());
        data.append("screenName", $("#screenName").val());
        data.append("screenIdnum", $("#screenIdnum").val());
        data.append("screenNum", $("#screenNum").val());
        data.append("resphone", $("#resphone").val());
        data.append("headBank", $("#headBank").val());
        data.append("branchBank", $("#branchBank").val());
        data.append("bankNum", $("#bankNum").val());
        data.append("province", $("#province").val());
        data.append("city", $("#city").val());
        data.append("time", $("#time").val());
        data.append("1", document.getElementById("1").files[0]);
        data.append("2", document.getElementById("2").files[0]);
        data.append("4", document.getElementById("4").files[0]);
        $.ajax({
            url: prefix + "/updateMerMes",
            data: data,
            type: "post",
            dataType: "json",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                if (result.code == '0') {
                    $.operate.successCallback(result);
                }else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            }
        })


    // /**
    //  * 验证图片上传
    //  */
    // function valiFile() {
    //     //获取文本描述
    //     var textArray=new Array();
    //     $($('.font-noraml')).each(function(index){
    //         textArray.push($(this).text().replaceAll(":",''))
    //     });
    //     //错误选择描述
    //     $($('input[type="file"]')).each(function(index){
    //         if($('input[type="file"]').val() == "") {
    //             $.modal.alertError("请上传" + textArray[index]);
    //             return false;
    //         }
    //     });
    //     return true;
   }

</script>
</body>
</html>